<template>
    <view>
        <transition name="slide-fade">
            <view class="actionSheet-layer" v-show="value" @click.stop="$emit('input', false)"></view>
        </transition>
        <view class="actionSheet-content flex-column-center" :class="{'actionSheet-content-open': value}">
            <view class="bgfff">
            	<view class="actionSheet-item" @click="clickSelect(item)" v-for="(item, index) in actions" :key="index">
            		<text class="actionSheet-item-text font34">{{item}}</text>
            	</view>
            	<view class="actionSheet-cancel" @click="$emit('input', false)">
            	    <text class="font34 color999">取消</text>
            	</view>
            </view>
        </view>
    </view>
</template>

<script>
export default {
    data() {
        return {
            defaultFontColor: '#057DFE',
        }
    },
    methods: {
        // 选中的项
        clickSelect(item){
            this.$emit('select', item)
			this.$emit('input', false)
        }
    },
    // 1、选项 2、是否显示
    props: ['actions', 'value']
}
</script>

<style lang="scss">
.slide-fade-enter,
.slide-fade-leave-to {
  opacity: 0;
}
.slide-fade-enter-active,
.slide-fade-leave-active {
  transition: all .1s;
}

.actionSheet-layer {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, .5);
    z-index: 98;
}
.actionSheet-content {
    width: 100%;
    padding: 0 25rpx;
    position: fixed;
    left: 0;
    bottom: -100%;
    z-index: 99;
    transition: all .1s linear;
    -moz-transition: all .1s linear; /* Firefox 4 */
    -webkit-transition: all .1s linear; /* Safari 和 Chrome */
    -o-transition: all .1s linear; /* Opera */
	&>view {
		width: 100%;
		border-radius: 25rpx;
	}
	&.actionSheet-content-open {
		bottom: 68rpx;
	}
	.actionSheet-item,
	.actionSheet-cancel {
	    width: 100%;
	    height: 110rpx;
	    line-height: 110rpx;
	    text-align: center;
	}
	.actionSheet-item {
	    border-bottom: 1rpx solid #D8D8D8;
	}
	.actionSheet-item-text {
		color: #A66354;
	}
}
</style>